<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>氦闪</title>
    <link rel="icon" href="__PUBLIC__/web/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="__PUBLIC__/web/css/city-picker.css">
    <link rel="stylesheet" href="__PUBLIC__/web/css/public.css">
    <link rel="stylesheet" href="__PUBLIC__/web/css/register.css">
</head>
<body>
<header>
    <include file="Index/header"/>
</header>


<include file="Index/left"/>


<section>
    <div class="ly-content">
        <div class="ly-title">
            注册
        </div>
        <form id="YourForm" class="mui-input-group">
        <div class="ly-register">
            <ul class="ly-reg">
                <li class="ly-cation">
                    <span>1</span>
                    <p>验证手机号码</p>
                </li>
                <li>
                    <span>2</span>
                    <p>设置密码</p>
                </li>
                <li>
                    <span>3</span>
                    <p>录入信息</p>
                </li>
                <li>
                    <span>4</span>
                    <p>加入氦闪</p>
                </li>
            </ul>

            <ul class="ly-list" id="ly-mit-1">
                <li>
                    <input type="text" class="ly-input" id="phone" required name="phone" placeholder="请输入手机号码"/>
                    <span class="ly-code" data-id="1">获取验证码</span>
                </li>
                <li>
                    <input type="text" class="ly-input" required name="code" placeholder="请输入验证码"/>
                </li>
                <li>
                    <a class="ly-submit" id="ly-sub-1">下一步</a>
                </li>
            </ul>
            <ul class="ly-list" id="ly-mit-2">
                <li>
                    <input type="text" class="ly-input" required name="username" placeholder="用户名/登录名"/>
                </li>
                <li>
                    <input type="password" class="ly-input" required name="password" placeholder="密码"/>
                </li>
                <li>
                    <input type="password" class="ly-input" required name="pwd2" placeholder="确认密码"/>
                </li>
                <li>
                    <a class="ly-submit" id="ly-sub-2">下一步</a>
                </li>
            </ul>

            <ul class="ly-list" id="ly-mit-3">
                <h1>我想成为氦闪的用户</h1>
                <li>
                    <input type="text" class="ly-input" required name="nickname" placeholder="姓名"/>
                </li>
                <li>
                    <select required class="ly-select" name="sex">
                        <option>请选择性别</option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                </li>
                <!--<li>-->
                    <!--<input type="text" class="ly-input" placeholder="邮箱地址"/>-->
                <!--</li>-->
                <li>
                    <input type="text" class="ly-input" name="birth" id="birth" placeholder="出生日期"/>
                </li>
                <h1>收货地址</h1>
                <li>
                    <input type="text" id="city" class="ly-input" name="city" placeholder="请选择省市区"/>
                </li>
                <li>
                    <input type="text" class="ly-input" name="address" placeholder="详细地址"/>
                </li>
                <li>
                    <input type="text" class="ly-input" name="fullname" placeholder="收货人姓名"/>
                </li>
                <li>
                    <p><label for="checks"><input type="checkbox" id="checks"/> 我想用我的邮箱或手机接收关于氦闪新品的信息</label></p>
                    <p><label for="check"><input type="checkbox" id="check"/>我接收隐私条款</label></p>
                </li>
                <li>

                </li>
                <li>
                    <a class="ly-submit" id="ly-sub-3">注册</a>
                </li>
            </ul>

            <ul class="ly-list" id="ly-mit-4">
                <h1>恭喜您成为氦闪的一员！</h1>
                <li>
                    <a class="ly-submit" id="ly-sub-4">完成并登陆</a>
                </li>
                <li>注册有疑问，请直接 <a href="contact.html" class="ly-a">联系我们</a></li>
            </ul>
        </div>
        </form>
    </div>

    <include file="Index/footer"/>
</section>

<div class="ly-menu-nav" data-id="1">
    <img src="__PUBLIC__/web/images/icon_menu.png" />
</div>

</body>
<script src="__PUBLIC__/web/js/jquery.min.js"></script>
<script src="__PUBLIC__/web/js/reg.js"></script>
<script src="__PUBLIC__/web/js/city-picker.data.js"></script>
<script src="__PUBLIC__/web/js/city-picker.js"></script>
<script src="__PUBLIC__/web/js/laydate/laydate.js"></script>
<script src="__PUBLIC__/web/js/public.js"></script>

<script>

    //执行一个laydate实例
    var date = new Date();
    var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+ " "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
    console.log(time)
    laydate.render({
        elem: '#birth' //指定元素
        ,min: '1900-8-11 12:30:00'
        ,max:time
    });

    $(".ly-code").on("click", function () {
        var that = $(this);
        var id = that.attr("data-id");
        var phone = $("#phone").val();
        if(!phone) {
            alert('请填写手机号');return false;
        }
        if (id == 1) {


            var code_num;
            var telReg = /^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
            var pwdReg=/^([0-9]|[a-zA-Z]){6,20}$/;
            $.ajax({
                url: "{:U('AppApi/Member/sendSms')}",
                data: {
                    username: $("#phone").val(),//输入手机号点击发送验证码   后台需要的手机号
                    type: 1//类型1 ：注册类
                },
                dataType: 'json',//服务器返回json格式数据
                type: 'post',//HTTP请求类型
                timeout: 10000,//超时时间设置为10秒；
                beforeSend: function () {
                    var phone = $("#phone").val();//console.log(phone.length);
                    if(!phone) {
                        alert('请输入手机号');
                        return false;
                    }
                    if(phone.length < 11) {
                        alert('请输入有效的手机号');
                        return false;
                    }
                    if (!telReg.test(phone)) {
//						alert(11);
                        console.log(telReg.test($("#phone").val()));//return false;
                        alert("请输入正确的手机号码");
                        return false;
                    }

                },
                success: function (data) {
                    //后台响应成功返回code   赋值给code_num
                    code_num = data.code;
                    // 服务器返回响应，根据响应结果，分析是否登录成功；
                    if(code_num == '200') {
                        // sendCode(this);
                        // mui.alert('发送成功');
                        that.attr("data-id", 2);
                        var num = 60;
                        that.html("60秒");
                        var index = setInterval(function () {
                            num--;
                            that.html(num + "秒");
                            if (num == 0) {
                                clearInterval(index);
                                that.html("获取验证码");
                                that.attr("data-id", 1);
                            }
                        }, 1000);
                    }
                    // console.log(data);
                    if(code_num == '210') {
//						sendCode(this);
                        alert(data.mark);
                    }

                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；提示异常信息
                    alert(type);
                }
            });

        }
    });


    $("#ly-sub-1").on("click", function () {
        $(".ly-reg li").eq(1).addClass("ly-cation");
        $("#ly-mit-1").hide();
        $("#ly-mit-2").show();
    })

    $("#ly-sub-2").on("click", function () {
        $(".ly-reg li").eq(2).addClass("ly-cation");
        $("#ly-mit-2").hide();
        $("#ly-mit-3").show();
    })

    $("#ly-sub-3").on("click", function () {
        var $YourForm = $("#YourForm").serialize();
        $.ajax({
            type: 'post',
            url: "{:U('AppApi/Member/register')}", //正式环境
            data: $YourForm,
            dataType: "json",//后台提供传输类型
            timeout: 30000,
            // 发起请求前就调用
            beforeSend: function (data) {

                //判断手机号码是否符合
                /*if (!telReg.test($("#YourForm .tel").val())) {
                    mui.alert("推荐手机号码不正确,请重新进入!");
                    return false;
                }
                if (!pwdReg.test($("#YourForm .password").val())) {
                    mui.alert("请输入6~18位密码，至少包含数字/字母符号中的2种");
                    return false;
                }
                //判断两次密码是否相同
                if ($("#YourForm .password").val() != $("#YourForm .password1").val()) {
                    mui.alert("两次密码不一致");
                    return false;
                }
                if(!$("#YourForm #province").val()) {
                    mui.alert('请选所在区域');
                    return false;
                }
                //判断输入框是否为空
                if (!$("#YourForm .tel").val() || !$("#YourForm .code").val() || !$("#YourForm .password").val() || !$("#YourForm .password1").val() || !$("#YourForm #province").val()) {
                    mui.alert("信息不完整！！！");
                    return false;
                }*/
//                    //判断验证码是否一致
//                    if ($("#YourForm .code").val() != code_num) {
//                        mui.alert("验证码不正确")
//                    }
//						$this.html('正在提交...').addClass("disabled").attr("disabled", true);
            },
            success: function (data) {
                //var data = JSON.parse(data);
                if (data.code == 200) {
                    alert('注册成功');
                    $(".ly-reg li").eq(3).addClass("ly-cation");
                    $("#ly-mit-3").hide();
                    $("#ly-mit-4").show();
                    // location.href = "{:U('Wap/Share/detail')}";
                } else {
                    alert(data.mark);
//                        alert('注册失败');
                }
            },
            complete: function () { // 请求完成时会调用
            },
            error: function () {
            }
        });

    })
    $("#ly-sub-4").on("click", function () {
        window.location.href = "{:U('login')}";
    })


    $("#city").click(function (e) {
        SelCity(this, e);
        console.log("inout", $(this).val(), new Date())
    });
</script>
</html>





